<!--
value: 默认值 "12px" "30%"
unitData:单位 [{k:"选型1",v:"1"}]
size:组件大小 "min" "medium" "small"
defaultUnit：0 普通的浏览器宽度高度等的单位
:min:最小值
:max:最大值
:step:步长
 -->
<template>
  <div class="mc-unit">
      <el-input-number class="mc-unit-value" :min="min" :max="max" :step="step" v-model="inputNumber" @change="changeValue" :size="size"></el-input-number>
      <el-select class="mc-unit-dw" v-model="select" placeholder="单位" @change="changeValue" :size="size" v-show="showDw">
           <el-option
              v-for="item in mcUnitData"
              :key="item.v"
              :label="item.k"
              :value="item.v">
            </el-option>
      </el-select>
  </div>
</template>

<script>
export default {
  name: 'mc-unit',
  props: {
      "value":[String,Number],
      "unitData":Array,
      "size":String,
      "defaultUnit":{
        type:Number,
        default:0
      },
      "min":Number,
      "max":Number,
      "step":Number,
    /*是否显示单位*/
      'showDw':{type:Boolean,default: true}
  },
  data () {
    return {
       "select":"",
       "inputNumber":undefined,
       "mcUnitData":this.unitData
    }
  },

  watch:{
    //观察父亲值变化 子组件自动刷新
      value(newValue){
          if(typeof newValue == 'undefined'){
              newValue = "";
          }
          this.parseValue(newValue);
      }
  },
  methods:{
/*    parseValue:function(){
        var arr = (this.value+"").match(/([\d\.]*)([a-zA-Z%]*)/);
        if(arr[1]!==""){
            return parseFloat(arr[1])
        }
        return null;
    },*/
    parseUnit:function(){
        var arr = (this.value+"").match(/([\d\.]*)([a-zA-Z%]*)/);
        if(arr[2]!==""){
            return arr[2]
        }
        return null;
    },
    //24% 30px 23.2rem 23
    parseValue:function(value){
        if(value!==0 && !value){
          this.inputNumber= undefined;
          this.select="";
          return;
        }
        var arr = (value+"").match(/([\d\.]*)([a-zA-Z%]*)/);
        if(arr[1]!==""){
            this.inputNumber = parseFloat(arr[1])
        }
        if(arr[2]!==""){
            this.select = arr[2];
        }

    },
    changeValue:function(){
        var newValue = null;
        if(this.inputNumber || this.inputNumber===0){
            newValue = this.inputNumber
            if(this.select){
              newValue = newValue+this.select
            }

        }else{
            newValue = this.select
        }
        //告诉父亲值同步 默认取v-model 而且不报错
        this.$emit("input",newValue);
        this.$emit("change",newValue);
    },

  },
  mounted () {
      if(this.value){
        this.parseValue(this.value)
      }

      if(!this.mcUnitData){
         if(this.defaultUnit===0){
            this.mcUnitData =
              [
                {
                  k: '单位',
                  v: ''
                }, {
                  k: '%',
                  v: '%'
                }, {
                  k: 'px',
                  v: 'px'
                }, {
                  k: 'em',
                  v: 'em'
                },{
                  k: 'rem',
                  v: 'rem'
                },{
                  k: 'vw',
                  v: 'vw'
                },{
                  k: 'vh',
                  v: 'vh'
                },{
                  k: 'vmin',
                  v: 'vmin'
                },{
                  k: 'vmax',
                  v: 'vmax'
                },{
                  k: 'in',
                  v: 'in'
                },{
                  k: 'cm',
                  v: 'cm'
                },{
                  k: 'mm',
                  v: 'mm'
                },{
                  k: 'pt',
                  v: 'pt'
                },{
                  k: 'pc',
                  v: 'pc'
                },{
                  k: 'ex',
                  v: 'ex'
                }
              ]
         }
      }
  }
}
</script>

<style lang="scss">
  .mc-unit{
    display:inline-block;
  }
.mc-unit-value{
  width:100px;
}
.mc-unit-dw{
  width:80px;
}
</style>
